<template>
  <div class="wrapper">
    <el-form ref="searchForm" :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item>
        <router-link :to="'/role/add'">
          <el-button type="success" style="margin-bottom:20px">添加角色</el-button>
        </router-link>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchData.status" placeholder="选择状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="禁用" value="0"></el-option>
          <el-option label="正常" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch('searchForm')">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="roleList" :stripe="true" :border="true" :highlight-current-row="true">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="英文角色名" prop="name"></el-table-column>
      <el-table-column label="中文角色名" prop="name_cn"></el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
      <el-table-column label="状态" prop="status_text"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="'/role/edit/' + scope.row.id">
            <el-button size="mini">编辑</el-button>
          </router-link>
          <el-button v-if="scope.row.status ===  1" size="mini" @click="stopRole(scope.row)">禁用</el-button>
          <el-button v-else size="mini" @click="startRole(scope.row)">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="pageData.per_page"
        :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  // import notify from '@/tools/notify'
  export default {
    data () {
      return {
        searchData: {
          status: ''
        },
        rules: {}
      }
    },
    created () {
      this.getList()
    },
    computed: {
      ...mapState({
        pageData: state => state.role.pageData,
        roleList: state => state.role.allList
      })
    },
    methods: {
      // 获取角色列表数据
      async getList () {
        let payload = {
          page: this.pageData.current_page,
          list_rows: this.pageData.per_page,
          status: this.$route.query.status
        }
        await this.$store.dispatch('role/getAll', payload)
      },
      // 点击页面时，跳转到相应页面
      handleCurrentChange (val) {
        this.pageData.current_page = val
        this.getList()
      },
      // 禁用某个角色
      async stopRole (row) {
        let payload = {
          id: row.id
        }
        await this.$store.dispatch('role/stopRole', payload).then(res => {
          this.getList()
        })
      },
      // 启用某个角色
      async startRole (row) {
        let payload = {
          id: row.id
        }
        await this.$store.dispatch('role/startRole', payload).then(res => {
          this.getList()
        })
      },
      // 开启搜索功能
      async onSearch (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$router.push({path: '/role/list', query: {status: this.searchData.status}})
            this.getList()
          }
        })
      }
    }
  }
</script>
<style scoped lang="scss">
</style>
